<template>

  <el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="账号" prop="username">
        <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>

      </el-form-item>
    </el-form>
  </el-row>

  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" plain icon="Plus" size="small">新增</el-button>
    </el-col>

  </el-row>

  <el-row>

    <el-table :data="tableData">

      <el-table-column prop="userid" label="userid"/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="nickname" label="昵称"/>

    </el-table>


  </el-row>


</template>

<script setup name="User">
import {onMounted, ref} from 'vue'
import axios from 'axios'

const tableData = ref([])


const queryParams = ref({
  username: ''
})

function queryUserList() {
  axios.get('http://localhost:8080/user/list').then(response => {
    // console.log(response.data);


    /**
     *
     * response.data    --> userService.list()
     *
     *
     * response.data    --> Ret{
     *          code
     *          data
     *          msg:
     *
     * }

     */

    if (response.status == 200) {
      const ret = response.data;
      const {code, data, msg} = ret;
      if (code == 200) {
        alert("请求成功")
        tableData.value = data;
      }

    }

  })
}


//加载当前页面完成之后 查询
onMounted(() => {
  queryUserList()
})


</script>

<style scoped></style>
